<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>通知管理</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/fonts/line-icons.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/main.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/responsive.css">
	<link rel="stylesheet" type="text/css" href="../assets/plugins/datatables/bootstrap-table.min.css" />
	<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
	<div class="breadcrumb-wrapper row">
		<div class="col-12 col-lg-3 col-md-6">
			<h4 class="page-title">发布通知</h4>
		</div>
		<div class="col-12 col-lg-9 col-md-6">
			<ol class="breadcrumb float-right">
				<li class="active">通知管理</li>
				<li class="active"> / 发布通知</li>
			</ol>
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-body">
					<form class="form-inline">
						<div class="col-10" >
							<div class="form-group row" >
								<label>查找通知：</label>
								<input type="text" class="form-control mb-2 mr-sm-2" id="findUsername" placeholder="发送人"/>
								<input type="text" class="form-control mb-2 mr-sm-2" id="findMessage" placeholder="内容"/>
								<input type="text" class="form-control mb-2 mr-sm-2" id="findTargetUsername" placeholder="接收对象账号"/>
								<select class="form-control mb-2 mr-sm-2" style="height: 43px;" id="findTargetType">
									<option value="0">个人</option>
									<option value="1">全体用户</option>
									<option value="">所有对象</option>
								</select>
								<label>发送时间：</label>
								<input type="text" class="form-control mb-2 mr-sm-2" id="startTime"/>
								<label>至：</label>
								<input type="text" class="form-control mb-2 mr-sm-2" id="endTime"/>
								<input type="button" class="btn btn-success" id="findNotice" value="查找">
							</div>
						</div>
						<div class="col-2">
							<input type="button" class="btn btn-success" data-toggle="modal" data-target="#createModal" style="float: right;" value="发布通知" id="createNotice"/>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="container-fluid">
	<table id="table">
		
	</table>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body text-center"><h3>是否确认删除？</h3></div>
			<div class="modal-footer">
				<input type="text" id="noticeId" hidden>
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-danger" id="sureDelete">确认</button>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">发布通知</h5>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			</div>
			<div class="modal-body">
				<div class="form-group row">
					<label class="col-sm-3 col-form-label">发送对象</label>
					<div class="col-sm-9">
						<input id="targetUsername" type="text" class="form-control">
					</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-3 col-form-label">对象类型</label>
					<div class="col-sm-9">
						<select class="form-control form-control-lg" id="targetType">
							<option value="0">个人</option>
							<option value="1">全体用户</option>
						</select>
					</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-3 col-form-label">内容</label>
					<div class="col-sm-9">
						<textarea id="message" class="form-control" rows="5"></textarea>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-danger" id="sureCreate">确认</button>
			</div>
		</div>
	</div>
</div>
<script src="../assets/js/jquery-min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/plugins/datatables/bootstrap-table.min.js"></script>
<script src="../assets/plugins/datatables/bootstrap-table-zh-CN.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="../assets/js/popper.min.js"></script>
<script>
    //项目根路径
    var ctx = window.parent.ctx;
	var user = window.parent.user;
	var par = $("body");
	var pheight = $(window.parent.document).find(".main-content").height();
    
	$(function(){
		$('#startTime').datetimepicker({
			format: 'YYYY-MM-DD',
			locale: 'zh-cn'
		});
		$('#endTime').datetimepicker({
			format: 'YYYY-MM-DD',
			locale: 'zh-cn'
		});

		// 监听下拉框，根据发送对象类型，选择发送对象框是否展示
		$("#targetType").change(function () {
			if($("#targetType").val()==="1"){
				$("#targetUsername").parent().parent().hide();
			}
			if($("#targetType").val()==="0"){
				$("#targetUsername").parent().parent().show();
			}
		});
		// 监听下拉框，根据发送对象类型，选择发送对象框是否展示
		$("#findTargetType").change(function () {
			if($("#findTargetType").val()==="1"){
				$("#findTargetUsername").hide();
				$("#findTargetUsername").val()
			}
			if($("#findTargetType").val()==="0"){
				$("#findTargetUsername").show();
				$("#findTargetUsername").val()
			}
		});

		$.ajax({
			type: "post",
			url: ctx+'/notice/getAllNotice',
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				$("#table").bootstrapTable('load',data);

				// 父页面自适应子页面高度
				par.height(pheight);
			}
		});
		
		$("#findNotice").click(function(){
			var jsonData = {"username":$("#findUsername").val(),"message":$("#findMessage").val(),"targetUsername":$("#findTargetUsername").val(),
				"targetType":$("#findTargetType").val(),"startTime":$("#startTime").val(),"endTime":$("#endTime").val()};
			$.ajax({
				type: "post",
				url: ctx+'/notice/getNoticeByConditions',
				xhrFields: {
					withCredentials: true
				},
				data: JSON.stringify(jsonData),
				contentType: "application/json",
				success: function(data) {
					$("#table").bootstrapTable('load',data);

					// 父页面自适应子页面高度
					par.height(pheight);
				}
			});

		});

		$("#sureDelete").click(function () {
			$.ajax({
				type: "post",
				url: ctx+'/notice/deleteById',
				xhrFields: {
					withCredentials: true
				},
				data: {id:$("#noticeId").val()},
				success: function(data) {
					alert(data);
					window.location.reload();
				}
			});
		});

		$("#sureCreate").click(function () {
			$.ajax({
				type: "post",
				url: ctx + "/websocket/insertNotice",
				data: JSON.stringify({"targetUsername":$("#targetUsername").val(),"targetType":$("#targetType").val(),"message":$("#message").val()}),
				xhrFields: {
					withCredentials: true
				},
				contentType: "application/json",
				success: function (data) {
					alert(data);
					window.location.reload();
				}
			})
		});
		
		
		$("#table").bootstrapTable({
			pagination: true,
			pageSize: 8,
			pageNumber: 1,
			smartDisplay: true,
			columns: [{
				field: '',
				title: '序号',
				formatter: function(value,row,index){
					return index+1;
				}
			},
			{
				field: 'sourceUser.username',
				title: '发送人账号'
			},
			{
				field: 'message',
				title: '内容'
			},
			{
				field: 'targetUser',
				title: '接收对象账号',
				formatter: function (value, row) {
					if(row.targetType===0){
						return value.username;
					}else if(row.targetType===1){
						return "所有人";
					}
				}
			},
			{
				field: 'targetType',
				title: '接收对象类型',
				formatter: function (value, row) {
					if(value===0){
						return "个人";
					}else if(value===1){
						return "全体用户";
					}
				}
			},
			{
				field: 'sendTime',
				title: '发送时间'
			},
			{
				field: 'operate',
				title: '操作',
				events: {
					'click #deleteNotice': function (e, value, row, index) {
						$("#noticeId").val(row.id);
						$("#deleteModal").modal('show');
					}
				},
				formatter: function(value, row, index){
					return "<button id='deleteNotice' type='button' class='btn btn-danger'>删除</button>";
				}
			}],
			onPostBody: function () {
				$(".page-list").remove();
			}
		})
	});

</script>
</body>
</html>